/*
 * @Author: cygao
 * @Last Modified by: xieqing
 * @Last Modified time: 2018-03-06
 */

<template>
  <div class="house-desc">
    <div class="step">
      <flow>
        <flow-state title="验证房源" is-done></flow-state>
        <flow-line is-done></flow-line>

        <flow-state title="房屋信息" is-done></flow-state>
        <flow-line is-done></flow-line>

        <flow-state title="出租信息" is-done></flow-state>
        <flow-line is-done></flow-line>
        <flow-state title="选择合同" is-done></flow-state>
        <flow-line></flow-line>

        <flow-state title="发布房源" is-done></flow-state>
      </flow>
    </div>
    <div style="height:6px;background:#f4f4f4"></div>
    <div class="house-desc-item">
      <div class="house-desc-title">
        <span>房屋配置</span>
      </div>
      <div class="house-item-list" >
        <span class="m-span" :class="{ blue: houseDesc.configuration.indexOf(item.code) >= 0 }" @click="selectData('PZ', item)" v-for="(item, key) in houseConfigList" :key="key">{{item.value}}</span>
      </div>
    </div>
    <div style="height:1px;background:#f4f4f4"></div>
    <div class="house-desc-item">
      <div class="house-desc-title">
        <span>房屋亮点</span>
      </div>
      <div class="house-item-list" >
        <span class="m-span" :class="{ blue: houseDesc.highlights.indexOf(item.code) >= 0 }" @click="selectData('LD', item)" v-for="(item, key) in highlightList" :key="key">{{item.value}}</span>
      </div>
    </div>
    <div class="house-desc-item">
      <div class="house-desc-title">
        <span>出租要求</span>
      </div>
      <div class="house-item-list" >
        <span class="m-span" :class="{ blue: houseDesc.rentalDemand.indexOf(item.code) >= 0 }" @click="selectData('CZYQ', item)" v-for="(item, key) in rentalDemandList" :key="key">{{item.value}}</span>
      </div>
    </div>
    <div style="height:1px;background:#f4f4f4"></div>
    <div class="house-desc-item">
      <div class="house-desc-title">
        <span>房屋描述</span>
      </div>
      <textarea class="house-desc-edit house__desc" v-model="houseDesc.facility" placeholder="详细的描述会大大增加快速出租的机会！可以介绍房子吸引人的地方，交通和周边环境，可以入住的时间，对租客的要求等"></textarea>
      <div class="tip__warn">如果输入内容出行新广告法中禁止的违规词，系统将自动屏蔽。</div>
    </div>
    <!-- <div class="m-tips">
      <span>*点击“发布”代表您已同意《房屋发布协议》</span>
    </div> -->
    <div class="house-desc-btn">
      <x-button class="btn" type="primary" @click.native="pubishHouse">{{!update ? '发布' : '更新'}}</x-button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      houseDesc: {
        configuration: [], // 房屋配置
        highlights: [], // 房屋亮点
        rentalDemand: [], // 出租要求
        facility: '' // 房屋描述
      },
      houseConfigList: [],
      highlightList: [],
      rentalDemandList: [],
      update: false
    }
  },
  created () {
    this.getData('PZ')
    this.getData('LD')
    this.getData('CZYQ')
    // 获取编辑的房源数据
    let houseId = this.$route.query.id
    if (houseId) {
      this.update = true
      this.$axiosPosting(this.$api.getMyHouseById, {houseId: houseId}).then(res => {
        if (res.code === '0000') {
          let resData = res.data || {}
          let { configuration, highlights, rentalDemand, facility } = resData
          this.houseDesc = {
            configuration: configuration.split(','),
            highlights: highlights.split(','),
            rentalDemand: rentalDemand.split(','),
            facility
          }
        }
      })
    }
  },
  methods: {
    beforeSubmit () {
      if (!this.houseDesc.configuration.length) {
        this.$vux.toast.text('请选择房屋配置')
        return false
      } else if (!this.houseDesc.highlights.length) {
        this.$vux.toast.text('请选择房屋亮点')
        return false
      } else if (!this.houseDesc.rentalDemand.length) {
        this.$vux.toast.text('请选择出租要求')
        return false
      } else if (!this.houseDesc.facility) {
        this.$vux.toast.text('请填写房屋描述')
        return false
      } else {
        return true
      }
    },
    pubishHouse () {
      if (!this.beforeSubmit()) return // 下一步前验证输入数据
      let pubishHouseData = JSON.parse(window.localStorage.pubishHouseData || '{}')
      let postData = {
        ...pubishHouseData,
        images: pubishHouseData.images ? pubishHouseData.images.join(',') : '', // 房源介绍图片地址
        layoutRoom: pubishHouseData.houseValue ? pubishHouseData.houseValue[0] : 0, // 户型（室）
        layoutHall: pubishHouseData.houseValue ? pubishHouseData.houseValue[2] : 0, // 户型（厅）
        layoutToilet: pubishHouseData.houseValue ? pubishHouseData.houseValue[4] : 0, // 户型（卫）
        isFreebet: pubishHouseData.isFreebet ? pubishHouseData.isFreebet[0] : 0, // 是否免押 0否， 1是
        outManner: pubishHouseData.outManner ? pubishHouseData.outManner[0] : 0, // 出租方式
        configuration: this.houseDesc.configuration.join(','), // 房屋配置
        highlights: this.houseDesc.highlights.join(','), // 房屋亮点
        rentalDemand: this.houseDesc.rentalDemand.join(','), // 出租要求
        facility: this.houseDesc.facility, // 配套设施周边详情
        referencePrice: (Math.floor(Math.random() * 8) + 2) * 1000, // 参考租金
        houseCode: '', // 房屋唯一编码
        stairId: '', // 楼栋编号
        houseNum: '', // 房号
        years: '', // 年代
        strataFee: '', // 物业费
        status: 1000, // 房屋状态
        partnerName: '', // 共有产权人数组
        partnerIdCard: '', // 共有产权人身份证数组
        idCardImg1: '', // 共有产权人身份证人像面数组
        idCardImg2: '', // 共有产权人身份证国徽面数组
        proxy: '', // 共有产权人委托书
        id: this.$route.query.id || ''
      }
      let that = this
      this.$vux.confirm.show({
        title: '操作提示',
        content: that.update ? '您确定要更新吗？' : '您确定要发布吗？',
        onConfirm () {
          let api = that.update ? that.$api.updateMyHouse : that.$api.addHousePersonsInfo
          that.$axiosPosting(api, postData).then(res => {
            if (res.code === '0000') {
              // 清除本地发布房源数据
              localStorage.setItem('pubishHouseData', '')
              localStorage.setItem('houseImages', '')
              that.$router.push({path: './successHouse', query: {status: that.update ? 1 : 0}})
            } else {
              let txt = that.update ? '更新失败' : res.msg
              that.$vux.toast.text(txt)
            }
          })
        }
      })
    },
    // 获取筛选条件
    getData (codeType) {
      this.$axiosPosting(this.$api.getHouseAttributeByCodeType, { codeType }).then(res => {
        if (res.code === '0000') {
          let data = res.data
          this.setData(codeType, data)
        }
      })
    },
    // 筛选条件赋值至data中
    setData (codeType, data) {
      switch (codeType) {
        case 'PZ':
          this.houseConfigList = data
          break
        case 'LD':
          this.highlightList = data
          break
        case 'CZYQ':
          this.rentalDemandList = data
          break
      }
    },
    // 选择筛选条件
    selectData (type, item) {
      switch (type) {
        case 'PZ':
          let index0 = this.houseDesc.configuration.indexOf(item.code)
          if (index0 < 0) {
            // 添加标签
            this.houseDesc.configuration.push(item.code)
          } else {
            // 删除标签
            this.houseDesc.configuration.splice(index0, 1)
          }
          break
        case 'LD':
          // 标签最多选3个
          let index1 = this.houseDesc.highlights.indexOf(item.code)
          if (index1 < 0) {
            // 添加标签
            this.houseDesc.highlights.length >= 3 ? this.$vux.toast.text('房屋亮点最多选择3个') : this.houseDesc.highlights.push(item.code)
          } else {
            // 删除标签
            this.houseDesc.highlights.splice(index1, 1)
          }
          break
        case 'CZYQ':
          let index2 = this.houseDesc.rentalDemand.indexOf(item.code)
          if (index2 < 0) {
            // 添加标签
            this.houseDesc.rentalDemand.push(item.code)
          } else {
            // 删除标签
            this.houseDesc.rentalDemand.splice(index2, 1)
          }
          break
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .house-desc{
    font-size: .75rem;
    background: #fff;
    min-height: 100vh;
    box-sizing: border-box;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    .m-divide{
      height:.5rem;
      background: #f2f5fb;
    }
    .m-tips{
      padding: 0 5%;
      color: #ccc;
      text-align: center;
    }
    .house-desc-item{
      padding: 0 5%;
      .house-desc-title{
        line-height: 2.5rem;
        font-size: .9rem;
      }
      .house-item-list{
        display: flex;
        margin-bottom: .3rem;
        flex-wrap: wrap;
        justify-content: flex-start;
        .m-span{
          color:#ff9600;
          text-align: center;
          margin-bottom: .5rem;
          margin-right: 2%;
          width:23.5%;
          border-radius: .3rem;
          border:1px solid #ff9600;
          box-sizing: border-box;
          // background: lightgreen;
          &:nth-child(4n) {
            margin-right: 0;
          }
        }
        .blue{
          color:white;
          background:#ff9600;
        }
      }
      .house-desc-edit{
        width: 100%;
        height: 10rem;
        font-size: .75rem;
        border-radius: .3rem;
      }
    }
    .house-desc-btn{
      margin:.5rem 0;
      padding: 0 5%;
      .btn{
        background: #169bd5;
        height: 2.5rem;
      }
    }
    .tip__warn {
      font-size: 12px;
      color: #999;
    }
    .house__desc {
      padding: 6px;
      box-sizing: border-box;
    }
  }
</style>
